<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="注册"
        right-text="去登陆"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </header>
    <div class="logo">
      <img class="tb" src="https://img.alicdn.com/tfs/TB1sJWbjhv1gK0jSZFFXXb0sXXa-312-60.png" alt="">
    </div>
    <div class="content">
     <van-form @submit="onSubmit">
       <van-field
         v-model="username"
         name="userName"
         label="用户名"
         placeholder="用户名"
         :right-icon="userTip"
       />
       <van-field
         v-model="tel"
         name="tel"
         label="手机号"
         placeholder="手机号"
         @input="telT"
         :right-icon="telTip"
       />
       <van-field
         v-model="sms"
         name="code"
         center
         clearable
         label="短信验证码"
         placeholder="请输入短信验证码"
         :right-icon="smsTip"
       >
         <template #button>
           <van-button size="small" type="primary" :disabled="smsFlag" @click="send">{{smsMsg}}</van-button>
         </template>
       </van-field>
       <van-field
         v-model="password"
         type="password"
         name="passWord"
         label="密码"
         placeholder="密码"
         :right-icon="passwordTip"
       />
       <div style="margin: 16px;">
         <van-button round block type="info" native-type="submit" :disabled="allTip">
           注册
         </van-button>
       </div>
     </van-form>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Form, Field, Button, Toast } from 'vant'
import { sendCode, register } from '../../api/index.js'
Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Toast)

export default {
  data () {
    return {
      username: '',
      tel: '',
      sms: '',
      password: '',
      smsFlag: false,
      smsMsg: '发送验证码',
      t: null,
      time: 60
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    onClickRight () {
      this.$router.push('/login')
    },
    onSubmit (val) {
      // vant的表单中只要有按钮,就会触发submit,根据表单的验证状态决定是否触发submit
      const that = this
      // 调用注册接口
      register(val).then(res => {
        // 根据注册接口返回的数据,做出对应提示
        if (this.allTip) {
          return
        }
        switch (res.data.state) {
          case 201:
            Toast('用户名已被注册')
            break
          case 202:
            Toast('请先发送验证码')
            this.sms = ''
            break
          case 203:
            Toast('手机号已被注册')
            break
          case 204:
            Toast('验证码不正确')
            this.sms = ''
            break
          case 200:
          // 注册成功,给出提示,提示关闭后,自动跳转到登录
            Toast({
              message: '注册成功',
              onClose () {
                that.$router.push('/login')
              }
            })
            break
        }
      })
    },
    telT () {
      // 验证发送验证码的可用性
      if (this.telTip === 'success') {
        this.smsFlag = false
      } else {
        this.smsFlag = true
      }
    },
    send () {
      // 发送验证码
      // console.log(this.tel)
      sendCode({ tel: this.tel }).then(res => {
        // console.log(res.data)
        if (res.data.state === 201) {
          Toast('手机号已被注册')
        } else {
          Toast('发送成功')
        }
      })
      // 点击发送验证码后,无论成功或失败都开启倒计时功能
      // 禁用发送按钮
      this.smsFlag = true
      // 修改发送的文本
      this.smsMsg = this.time + 's后重新发送'
      // 开启计时器
      this.t = setInterval(() => {
        // 倒计时
        this.time--
        // 设置发送按钮的文本
        this.smsMsg = this.time + 's后重新发送'
        // 判断倒计时是否结束
        if (this.time <= 0) {
          // 清楚计时器
          clearInterval(this.t)
          // 修改文本
          this.smsMsg = '发送验证码'
          // 重置倒计时
          this.time = 60
          // 启用发送按钮
          this.smsFlag = false
        }
      }, 1000)
    }
  },
  computed: {
    userTip () {
      if (/^.{2,12}$/.test(this.username)) {
        return 'success'
      } else {
        return ''
      }
    },
    telTip () {
      if (/^1[3-9]\d{9}$/.test(this.tel)) {
        return 'success'
      } else {
        return ''
      }
    },
    smsTip () {
      if (/^\d{4}$/.test(this.sms)) {
        return 'success'
      } else {
        return ''
      }
    },
    passwordTip () {
      if (/^\w{6,12}$/.test(this.password)) {
        return 'success'
      } else {
        return ''
      }
    },
    allTip () {
      if (this.userTip && this.telTip && this.smsTip && this.passwordTip) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="scss">
  .van-button--info{
    height: 42px;
    line-height: 42px;
    background-image: linear-gradient(-90deg,#f00 0,#ff3264 100%);
    border: 0;
    border-radius: 21px;
    font-size: 16px;
  }
  .logo{
    height:0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    .tb{
        height: 30px;
        margin-top: 5px;
    }
  }
  .van-nav-bar__text{
    color: #fff;
    font-weight: bold;
  }
  .van-nav-bar{
    background-color: #8BD83B;
  }
  .van-nav-bar__title{
    font-size: 24px;
    color: #ccc;
    font-family: "微软雅黑";
  }
  .van-icon{
    color: #fff;
    font-weight: bold;
  }
  .van-nav-bar{
       background: linear-gradient(-90deg,#f00 0,#ff3264 100%);
       .van-icon{
         color: #FFF0FF;
       }
  }
  .van-icon{
    color: #fff;
  }
  .van-field__button{
    background:#e31436;
    .van-button{
      background: none;
      border: none;
    }
  }
</style>
